<template>
  <div class="homepage">
    <div class="cardpage">
    <info-card
      class="card"
      title="今日订单"
      :info="orderNum"
      setHeight="120px"
      setWidth="104.8px"
    ></info-card>
    <info-card
      class="card"
      title="钱包余额"
      :info="packageMoney"
      setHeight="120px"
      setWidth="104.8px"
      bgcolor="#f0f0f0"
      fontcolor="#409EFF"
    ></info-card>
    <info-card
      class="card"
      title="房间数量"
      :info="orderDetail"
      setHeight="120px"
      setWidth="104.8px"
    ></info-card>
    <info-card
      class="card"
      title="设备情况"
      :info="lockDetail"
      setHeight="120px"
      setWidth="104.8px"
      bgcolor="#f0f0f0"
      fontcolor="#409EFF"
    ></info-card>
    <info-card
      class="card"
      title="温馨提示"
      :info="tip1 + '' + tip2"
      setHeight="120px"
      setWidth="580px"
    ></info-card>
    </div>
    <div class="calendarplugs">
      <el-calendar>
        <template slot="dateCell" slot-scope="{ data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "✔️" : "无" }}
          </p>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import InfoCard from "./infoCard.vue";
export default {
  name: "Home",
  components: {
    InfoCard,
  },
  data() {
    return {
      orders: 10,
      money: 1980,
      orderedRoom: 10,
      allRoom: 28,
      onlineLock: 28,
      allLock: 28,
      tip1: "请注意查收右上角消息以防泄露订单。",
      tip2: "请注意查看房间锁在线情况若有问题及时通知维修人员。",
    };
  },
  computed: {
    orderNum() {
      return this.orders + "单";
    },
    packageMoney() {
      return this.money + "¥";
    },
    orderDetail() {
      return this.allRoom - this.orderedRoom + "/" + this.allRoom;
    },
    lockDetail() {
      return this.onlineLock + "/" + this.allLock;
    },
  },
};
</script>

<style  scoped>
.homepage {
  height: auto;
  overflow: hidden;
  display: flexbox;
  
}
.cardpage{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.calendarplugs {
  width: 100%;
  height: 80%;
  display: block;
  position: relative;
  margin-top: 20px;
}
.card + .card {
  margin-left: 28px;
}
</style>>

